<template>
  <div class="promode-container">
    <el-button type="primary">新建</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template #default>
          <el-table
            :data="tableData3"
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="序号"
            />
            <el-table-column
              prop="name"
              label="生产设备"
            />
            <el-table-column
              prop="code"
              label="编码"
            />
            <el-table-column
              prop="city"
              label="型号"
            />
            <el-table-column
              prop="date"
              label="生产日期"
            />
            <el-table-column
              prop="number"
              label="生产批号"
            />
            <el-table-column
              prop="zip"
              label="制造商"
            />
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="dialogTableVisible = true">物料</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="编号"
        prop="id"
        width="100px"
      />
      <el-table-column
        label="产品"
        prop="name"
      />
      <el-table-column
        label="生产线名称"
        prop="desc"
      />
      <el-table-column
        label="产品型号"
        prop="desc"
      />
      <el-table-column
        label="产品规格"
        prop="desc"
      />
      <el-table-column
        label="描述"
        prop="desc"
      />
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small">删除</el-button>
          <el-button type="text" size="small">新增</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="物料信息表" :visible.sync="dialogTableVisible" width="80%">
      <el-button type="primary">新建</el-button>
      <el-table :data="tableData2">
        <el-table-column property="a" label="编号" width="100" />
        <el-table-column property="b" label="物料编码" />
        <el-table-column property="c" label="物料名称" />
        <el-table-column property="d" label="型号" />
        <el-table-column property="e" label="规格" />
        <el-table-column property="f" label="单位" />
        <el-table-column property="g" label="单价" />
        <el-table-column property="t" label="类型" />
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '1',
        name: '华为',
        category: '生产线1',
        desc: '产品型号1',
        address: '遥遥领先'
      }],
      tableData2: [{
        a: '1',
        b: '2',
        c: '手机壳',
        d: '213',
        e: '123',
        f: '12',
        g: '322',
        t: 'asd-1'
      }],
      tableData3: [{
        id: '1',
        code: '2123',
        name: '设备1',
        date: '2023-10-10',
        number: '1',
        city: '123',
        zip: '三星'
      }],
      dialogTableVisible: false
    }
  }
}
</script>

<style>

</style>
